<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>动态列表</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>
<blockquote class="layui-elem-quote list_search">
    <div class="layui-inline">
        <input type="text" placeholder="开始时间：" class="layui-input" id="startTime" name="startTime">
    </div>
    <div class="layui-inline">
        <input type="text" class="layui-input" placeholder="结束时间：" id="endTime" name="endTime">
    </div>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-normal findByTime"
           data-type="delCheckData"><i class="layui-icon">&#xe63d;</i>加载</a>
    </div>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-danger batchDelByTime"
           data-type="delCheckData"><i class="layui-icon">&#xe640;</i>按范围删除</a>
    </div><br/>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-danger batchDel"
           data-type="delCheckData"><i class="layui-icon">&#xe640;</i>批量删除</a>
    </div>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-normal tags"
           data-type="delCheckData"><i class="layui-icon">&#xe6c6;</i>人气热门</a>
    </div>
    <div class="layui-inline">
        <a class="layui-btn layui-btn-normal like"
           data-type="delCheckData"><i class="layui-icon">&#xe770;</i>点击热门</a>
    </div>
</blockquote>
<table id="dynamicList" class="dynamicList" lay-filter="dynamicList"></table>
<script type="text/html" id="barEdit">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{/src/layui.js}"></script>
<script>
    layui.use(['jquery','layer','laypage','laytpl','table','laydate'],function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage,
            laytpl = layui.laytpl,
            table = layui.table,laydate = layui.laydate;
        table.render({
            elem:'#dynamicList',
            url:'/dynamic/list',
            title:'动态列表',
            cellMinWidth:80,
            page:true,
            limit:5,
            limits:[5,10,20],
            cols:[
                [
                    {type:'checkbox'},
                    {title:'ID',field:'id'},
                    {title:'发布人',field:'userName'},
                    {title:'动态图片',field:'dynamicImg'},
                    {title:'动态内容',field:'content'},
                    {title:'点赞数',field:'tagNum'},
                    {title:'浏览数',field:'likeNum'},
                    {title:'发布时间',field:'createTime'},
                    {title:'更新时间',field:'updateTime'},
                    {title:'操作',templet:'#barEdit'}
                ]
            ],
            initSort: {
                field: 'createTime' //排序字段，对应 cols 设定的各字段名
                ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            },
            parseData:function(result){
                return {
                    code:result.code==200?0:result.code,
                    msg:result.message,
                    count:result.data.total,
                    data:result.data.list
                }
            }
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#startTime' //指定元素
            ,type: 'date'//时间日期选择器
            ,format:'yyyy-MM-dd HH:mm:ss'
            ,max:'new Date()'
            ,isInitValue: false
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#endTime' //指定元素
            ,type: 'date'//时间日期选择器
            ,format:'yyyy-MM-dd HH:mm:ss'
            ,max:'new Date()'
            ,isInitValue: false
        });

        //按照时间范围重新加载
        $('.findByTime').click(function () {
            table.reload('dynamicList', {
                url: '/dynamic/scopeTime'
                ,where: {
                    startTime:$('#startTime').val(),
                    endTime:$('#endTime').val()
                } //设定异步数据接口的额外参数
                ,initSort: {
                    field: 'createTime' //排序字段，对应 cols 设定的各字段名
                    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                ,parseData:function(result){
                    return {
                        code:result.code==200?0:result.code,
                        msg:result.message,
                        count:result.data.total,
                        data:result.data.list
                    }
                }
            });
        });
        //点赞热门
        $('.tags').click(function () {
            table.reload('dynamicList', {
                url: '/dynamic/scopeTime'
                ,where: {
                    startTime:$('#startTime').val(),
                    endTime:$('#endTime').val()
                } //设定异步数据接口的额外参数
                ,initSort: {
                    field: 'tagNum' //排序字段，对应 cols 设定的各字段名
                    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                ,parseData:function(result){
                    return {
                        code:result.code==200?0:result.code,
                        msg:result.message,
                        count:result.data.total,
                        data:result.data.list
                    }
                }
            });
        });
        //点赞热门
        $('.like').click(function () {
            table.reload('dynamicList', {
                url: '/dynamic/scopeTime'
                ,where: {
                    startTime:$('#startTime').val(),
                    endTime:$('#endTime').val()
                } //设定异步数据接口的额外参数
                ,initSort: {
                    field: 'likeNum' //排序字段，对应 cols 设定的各字段名
                    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                ,parseData:function(result){
                    return {
                        code:result.code==200?0:result.code,
                        msg:result.message,
                        count:result.data.total,
                        data:result.data.list
                    }
                }
            });
        });
        //批量删除
        $('.batchDel').click(function () {
            //获取选中的数据
            var checkStatus = table.checkStatus('dynamicList');
            var data = checkStatus.data;
            if (data.length == 0){
                layer.msg("请选择动态数据",{icon:5});
                return ;
            }
            var ids = '';
            $.each(data,function (index , role) {//遍历数组，取出动态id
                if (index == data.length - 1){
                    ids += role.id;
                } else {
                    ids += role.id + ',';
                }
            })
            $.ajax({
                url:'/dynamic/batchDel',
                type:'delete',
                data:{'ids':ids},//传id字符串到后端
                dataType:'json',
                success : function (result) {
                    if (result.code == 200){
                        layer.msg(result.message,{icon:1},function () {
                            location.reload();
                        })
                    }else {
                        layer.msg(result.message,{icon:5});
                    }
                }
            })

        });
        //按照时间范围删除
        $('.batchDelByTime').click(function () {
            if($('#startTime').val() == ''){
                layer.msg("开始时间不能为空！",{icon:5});
                return;
            }
            if($('#endTime').val() == ''){
                layer.msg("结束时间不能为空！",{icon:5});
                return;
            }
            $.ajax({
                url:'/dynamic/batchDelByTime',
                type:'delete',
                data:{'startTime':$('#startTime').val(),
                      'endTime':$('#endTime').val()},
                dataType:'json',
                success : function (result) {
                    if (result.code == 200){
                        layer.msg(result.message,{icon:1},function () {
                            location.reload();
                        })
                    }else {
                        layer.msg(result.message,{icon:5});
                    }
                }
            })
        });
        //监听表格的行工具事件
        table.on('tool(dynamicList)',function (row) {
            var data = row.data;
            if(row.event === 'del'){
                layer.confirm("确定删除吗？",function (index) {
                    $.ajax({
                        url:'/dynamic/del',
                        type:'delete',
                        data:{'id':data.id},
                        dataType:'json',
                        success:function (result) {
                            if (result.code == 200){
                                layer.msg(result.message,{icon:1},function () {
                                    location.reload();//删除成功刷新页面
                                });
                            } else {
                                layer.msg(result.message,{icon:5});
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        })




    })
</script>

</body>
</html>